import React from 'react';
import { useThemeStore } from '../../stores/themeStore';
import './customComponents.css';

interface CustomProgressBarProps {
  percent: number;
  color?: string;
  showInfo?: boolean;
  className?: string;
}

const CustomProgressBar: React.FC<CustomProgressBarProps> = ({ 
  percent, 
  color, 
  showInfo = false,
  className = ''
}) => {
  const { mode } = useThemeStore();
  
  // 默认颜色基于主题
  const defaultColor = mode === 'dark' ? '#61dca3' : '#1890ff';
  const barColor = color || defaultColor;
  
  // 根据主题设置背景色
  const bgColor = mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.06)';
  
  return (
    <div className={`custom-progress-bar ${className}`}>
      <div 
        className="custom-progress-bar-track"
        style={{ 
          display: 'flex',
          alignItems: 'center',
          width: '100%',
          height: '8px',
          backgroundColor: bgColor,
          borderRadius: '4px',
          overflow: 'hidden'
        }}
      >
        <div 
          className="custom-progress-bar-fill"
          style={{ 
            height: '100%',
            width: `${percent}%`,
            backgroundColor: barColor,
            boxShadow: `0 0 6px ${barColor}`,
            transition: 'width 0.3s ease'
          }}
        />
      </div>
      {showInfo && (
        <span 
          className="custom-progress-bar-info"
          style={{ 
            color: barColor,
            fontSize: '14px',
            fontWeight: 500,
            marginLeft: '8px'
          }}
        >
          {percent}%
        </span>
      )}
    </div>
  );
};

export default CustomProgressBar;